<template>
  <div>
    <XTable ref="XTable" :tableList="tableList" :tableData="tableData" @selection-change="val => $message(`触发复选框 ${JSON.stringify(val)}`)" />
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
import { XTable } from '@/components/@fhsy/x-tool'
export default {
  components: { XTable },
  data: () => ({
    tableList: [
      { type: 'XSelect', width: 55, align: 'center' },
      { label: '序号', type: 'XNumber', width: 200, align: 'center' },
      { label: '日期', prop: 'date', width: 200 },
      { label: '姓名', prop: 'name' },
      { label: '地址', prop: 'address' }
    ],
    tableData: [
      { date: '2020-05-02', name: '白羊', address: '上海市杨浦区政立路 477 号' },
      { date: '2020-06-04', name: '白羊', address: '上海市杨浦区政立路 477 号' },
      { date: '2020-07-01', name: '白羊', address: '上海市杨浦区政立路 477 号' },
      { date: '2020-08-03', name: '白羊', address: '上海市杨浦区政立路 477 号' }
    ]
  }),
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.XTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.XTable.clearSelection()
      }
    }
  }
}
</script>
